<!-- 今日加速流量趋势 -->
<template>
  <div class="wrap">
    <i class="iconfont icon-wenduji"></i>
    <div ref="linechart" :style="{ height: height, width: width }" />
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "250px"
    },
    chartData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.linechart);
      this.setOptions();
    },

    setOptions() {
      const gaugeData = [
        {
          name: "内存使用大小",
          maxname: "内存总大小",
          value: (
            (this.chartData.MemUsed / this.chartData.MemTotal) *
            100
          ).toFixed(2),
          use: this.chartData.MemUsed,
          max: this.chartData.MemTotal,
          title: {
            show: false
          }
        },
        {
          name: "磁盘使用空间",
          maxname: "磁盘总空间",
          value: (
            (this.chartData.DiskUsed / this.chartData.DiskTotal) *
            100
          ).toFixed(2),
          use: this.chartData.DiskUsed,
          max: this.chartData.DiskTotal,
          title: {
            show: false
          }
        },
        {
          name: "cpu使用率",
          maxname: "cpu",
          value: ((this.chartData.CPURate / 100) * 100).toFixed(2),
          use: this.chartData.CPURate,
          max: "100%",
          title: {
            show: false
          }
        }
      ];
      this.chart.setOption({
        tooltip: {
          formatter: (v) => {
            if (v.data.maxname === "cpu") {
              return `${v.data.name}： ${v.data.value}%<br/> ${v.data.maxname}: ${v.data.max}`;
            } else {
              return `${v.data.name}： ${v.data.use}<br/> ${v.data.maxname}: ${v.data.max}<br/>使用率：${v.data.value}%`;
            }
          },
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          }
        },
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            detail: true,
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false
            },
            axisLine: {
              lineStyle: {
                width: 20
              }
            },
            title: {
              show: false
            },
            pointer: {
              show: false
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: gaugeData,
            title: {
              fontSize: 14
            }
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  .iconfont {
    position: absolute;
    font-size: 40px;
    top: 100px;
    left: calc(50% - 15px);
    z-index: 100000;
  }
}
</style>
